<template>
  <div>
    <div style="position:relative">
      <el-input @click.native="drawerShow" v-model="value" readonly>
        <template slot="append"><i class="el-icon-more"></i></template>
      </el-input>
    </div>
    <el-dialog
      ref="drawer"
      :title="title"
      :visible.sync="drawer"
      :width="size"
      append-to-body
      :close-on-click-modal="false"
      :withHeader="false"
      class="m-dialog"
      @close="closeDialog"
    >
      <el-container>
        <el-main>
          <el-row>
            <el-col>
              <slot></slot>
            </el-col>
          </el-row>
        </el-main>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
          >
            {{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
export default { 
  props: {
    value: [Number, String],
    title: [String],
    size: [String],
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      loading: false,
    };
  },
  methods: {
    close() {
      this.$refs.drawer.closeDrawer();
    },
    drawerShow() {
      this.drawer = true;
      this.$emit("inLoadAjax");
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then(() => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch(() => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    closeDialog(){
      this.$emit('closeDialog',true)
    }
  },
};
</script>
<style lang="scss" scoped>
.el-footer {
  position: absolute;
  display: block;
  bottom: 5px;
  width: 100%;
}
.demo-drawer__footer {
  text-align: center;
  position: absolute;
  bottom: 0;
}
.demo-drawer__footer button {
  display: inline-block;
  width: 45%;
}
</style>
